class Magnifier {
    constructor() {

        this.eventbind();
        this.mousemove();
        this.change();
    }
    change() {
        for (let i = 0; i < $('.exhibit-l>ul>li').length; i++) {
            $('.exhibit-l>ul>li').eq(i).click(function () {
                $('.small').css({ backgroundImage: $(this).css('backgroundImage') });
                $('.big').css({ backgroundImage: $(this).css('backgroundImage') });
                for (let j = 0; j < $('.exhibit-l>ul>li').length; j++) {
                    if (j == i) {
                        $(this).css({ border: '1px solid red' });
                    } else {
                        $('.exhibit-l>ul>li').eq(j).css({ border: '' });
                    }
                }
            })
        }
    }


    mouseover() {
        $('.small-s').css({ display: 'block' });
        $('.big').css({ display: 'block' });
    }


    mousemove() {
        let that = this;
        $('.small').mousemove(function (evt) {
            let e = evt || event;
            let Yleft = e.pageX - $(this).offset().left - $('.small-s').width() / 2;
            let Ytop = e.pageY - $(this).offset().top - $('.small-s').height() / 2;

            if (Yleft < 0) {
                Yleft = 0;
            }
            if (Ytop < 0) {
                Ytop = 0;
            }
            if (Yleft > $('.small').width() - $('.small-s').width()) {
                Yleft = $('.small').width() - $('.small-s').width() + 'px';
            }
            if (Ytop > $('.small').height() - $('.small-s').height()) {
                Ytop = $('.small').height() - $('.small-s').height() + 'px';
            }
            // $('.small-s').offset({ 'left': Yleft+'px' });
            // $('.small-s').offset({ 'top': Ytop+'px' });

            $('.small-s').get(0).style.left = Yleft + 'px'
            $('.small-s').get(0).style.top = Ytop + 'px'

            let x = $('.big').width() * Yleft / $('.small-s').width();
            let y = $('.big').height() * Ytop / $('.small-s').height();
            $('.big').css({ backgroundPositionX: -x + 'px' });
            $('.big').css({ backgroundPositionY: -y + 'px' });
        })
    }

    mouseout() {
        $('.small-s').css({ display: 'none' });
        $('.big').css({ display: 'none' });
    }
    eventbind() {
        let that = this;
        $('.small').mouseover(function () {
            that.mouseover();
        })
        $('.small').mouseout(function () {
            that.mouseout();
        })
    }

}
let c = new Magnifier();